import React from 'react';
import ReactDom from 'react-dom';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { List, Avatar, Button, Skeleton  } from 'antd';
import reqwest from 'umi-request';
const count = 3;
const fakeDataUrl = `https://randomuser.me/api/?results=${count}&inc=name,gender,email,nat&noinfo`;
class Shopping  extends  React.Component{
    constructor (props){
        super();
        this.state={
            listd:'',
            initLoading: true,
            loading: false,
            data: [],
            list: []
        }
    }
    componentDidMount() {
        const messages = this.props.location.state.data
        // this.setState({
        //     listd:messages
        // })
        this.getData(res => {
            this.setState({
              initLoading: false,
              data: res.results,
              list: res.results,
              listd:messages
            });
          });
        console.log(this.props.location.state)
    }
    getData = callback => {
        // reqwest({
        //   url: fakeDataUrl,
        //   type: 'json',
        //   method: 'get',
        //   contentType: 'application/json',
        //   success: res => {
        //     callback(res);
        //   },
        // });
        reqwest.get(fakeDataUrl)
        .then(function(res) {
            callback(res);
        })
        .catch(function(error) {
            console.log(error);
        });
      };
      onLoadMore = () => {
        this.setState({
          loading: true,
          list: this.state.data.concat([...new Array(count)].map(() => ({ loading: true, name: {} }))),
        });
        this.getData(res => {
          const data = this.state.data.concat(res.results);
          this.setState(
            {
              data,
              list: data,
              loading: false,
            },
            () => {
              // Resetting window's offsetTop so as to display react-virtualized demo underfloor.
              // In real scene, you can using public method of react-virtualized:
              // https://stackoverflow.com/questions/46700726/how-to-use-public-method-updateposition-of-react-virtualized
              window.dispatchEvent(new Event('resize'));
            },
          );
        });
      };
      handlemore(){
          console.log(888)
      }
    render() {
        const { initLoading, loading, list } = this.state;
        const loadMore =
          !initLoading && !loading ? (
            <div
              style={{
                textAlign: 'center',
                marginTop: 12,
                height: 32,
                lineHeight: '32px',
              }}
            >
              <Button onClick={this.onLoadMore}>loading more</Button>
            </div>
          ) : null;
        return(
          <PageHeaderWrapper>
            <div className='formbody'>
               <span>城市：{this.state.listd.name}</span>
            </div>
            <List
                    className="demo-loadmore-list"
                    loading={initLoading}
                    itemLayout="horizontal"
                    loadMore={loadMore}
                    dataSource={list}
                    renderItem={item => (
                    <List.Item
                        actions={[<a key="list-loadmore-edit">edit</a>, <a key="list-loadmore-more" onClick={this.handlemore.bind(this)}>more</a>]}
                    >
                        <Skeleton avatar title={false} loading={item.loading} active>
                        <List.Item.Meta
                            avatar={
                            <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
                            }
                            title={<a href="https://ant.design">{this.state.listd.name}</a>}
                            description="Ant Design, a design language for background applications, is refined by Ant UED Team"
                        />
                        <div>content</div>
                        </Skeleton>
                    </List.Item>
                    )}
                />
            </PageHeaderWrapper>
        )
    }
}
export default Shopping;